<style lang="scss" scoped>
    @mixin hover-color{
        transition: .3s;
        &:hover{
            color:#fff;
        }
    }
    .item{
        // margin-right: 100px;
        >*{
            display: block;
            margin-bottom: 10px;
        }
        >a, .fa-icon{
            @include hover-color;
        }
    }
    .fa-icon{
        width: 30px;
        height: 30px;
        padding: 5px;
        border-radius: 50%;
        border:1px solid #fff;
    }
    .f-white{
        color: rgba(#fff,.7);
    }
    .img-border{
        border:1px #fff solid;
    }
</style>
<template>
    <div class="bg-orange pt50 f-white">
        <div v-if="footer.monkey" class="flex row-around ui-center-width pb20">
            <div class="item">
                <p class="f16">王大虎</p>
                <div v-for="item in footer.monkey.list" :key="item.label" class="mb5">
                    <router-link  v-if="item.path" :to="item.path">{{item.label}}</router-link>
                    <a v-else :href="item.url">{{item.label}}</a>
                </div>
            </div>
            <div class="item">
                <p class="f16">旗下品牌</p>
                <div v-for="item in footer.under.list" :key="item.label" class="mb5">
                    <router-link  v-if="item.path" :to="item.path">{{item.label}}</router-link>
                    <a v-else :href="item.url">{{item.label}}</a>
                </div>
            </div>
            <div class="item">
                <p class="f16">服务</p>
                <div v-for="item in footer.service.list" :key="item.label" class="mb5">
                    <router-link  v-if="item.path" :to="item.path">{{item.label}}</router-link>
                    <a v-else :href="item.url">{{item.label}}</a>
                </div>
            </div>
            <div class="item">
                <p class="f16">关注</p>
                <div v-if="footer.follow">
                    <!-- <a :href="footer.follow.url[0]">
                        <icon name="facebook"></icon>
                    </a>
                    <a :href="footer.follow.url[1]">
                        <icon name="twitter"></icon>
                    </a>
                    <a :href="footer.follow.url[2]">
                        <icon name="qq"></icon>
                    </a>
                    <a :href="footer.follow.url[3]">
                        <icon name="weixin"></icon>
                    </a>
                    <a :href="footer.follow.url[4]">
                        <icon name="weibo"></icon>
                    </a> -->

                    <a v-for="(item,i) in footer.follow.img" :key="i" :href="footer.follow.url[i]">
                        <ui-img :url="item" size="30px" class="img-border ui-circle mr5"></ui-img>
                    </a>
                </div>
                <div>{{footer.mail.name}}</div>
                <div>{{footer.mail.email}}</div>
            </div>
            <div>
                <p class="f16">{{footer.down.name}}</p>
                <img :src="footer.down.img" width="100" height="100">
            </div>
        </div>
        <div class="p20 text-center" style="border-top:1px rgba(255,255,255,0.3) solid;">
            {{footer.site_copyright}}
        </div>
    </div>
</template>
<script>
    export default {
        name:'ui-footer',
        computed:{
            footer(){
                return this.$store.state.footer
            }
        },
        mounted(){
            if (!this.footer.monkey) {
                this.$http.get('index.php?g=home&m=index&a=index_footer')
                .then(({data})=>{
                    // console.log('footerData',data);
                    if (data.code===1) {
                        this.$store.commit({
                            type: 'update', //mutaitions 操作数据类型
                            data: data.data,//要保存的数据
                            modules: 'footer' //保存到哪个模块
                        })
                        this.footer = data.data
                    }
                })
            }
        },
    }
</script>